<template>


    <!-- 底部输入框 -->

    <div class="input-box-content">
<van-uploader v-if="statusChange" v-model="fileList" :max-count="uploadImageSize"  preview-size="60" disabled/>



        <!-- 按钮点击查询 -->
        <div class="btn-query">

            <van-button type="default" size="small">查询火车票</van-button>
            <van-button type="default" size="small">查询天气</van-button>
            <van-uploader>
                <van-button type="default" size="small">图片问答</van-button>
            </van-uploader>
            <van-button type="default" size="small">一键投诉</van-button>

        </div>
        <!-- 输入框 -->

        <div class="input-box-area">
            <img src="@/assets/clear.png" alt="clear message" class="clear-img">
            <van-field class="input-content" rows="2" autosize type="textarea" maxlength="50" placeholder="请输入查询内容" show-word-limit />
            <van-button type="default" size="small" class="message-submit">发送</van-button>

        </div>


    </div>
</template>

<script setup lang="ts">
import {ref} from "vue"
const statusChange:boolean=false;
const uploadImageSize:number = 1;
const fileList = ref([
      {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg',
   
      }
     
    ]);

</script>

<style lang="less" scoped>
.input-box-content {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    .btn-query {
        display: flex;
        align-items: center;
        margin-bottom: 5px;

        .van-button {
            margin-left: 15px;
        }
    }

    .input-box-area {
        background:white;
        display: flex;
        padding-bottom: 10px;
        padding-top: 5px;
        img{
            width:25px;
            height:25px;
            margin:0 10px;
        }
        align-items: center;
        .input-content{
            border-radius: 10px;
            background: #e5fdff;
            font-size: 13px;
            flex: 1;
        }
        .message-submit{
            width: 15%;
            border:none;
            color:rgb(9, 92, 64);
            font-weight: bold;
            font-size: 15px;
        }

    }

    // 强制去掉透明度
   /deep/ .van-uploader__wrapper--disabled{
        opacity: inherit !important;
        margin-left: 15px;
       
    }
    .van-uploader__preview{
        background: white;

    }


}
</style>